<template>
    <div class="header_top">
        <div class="components-input-demo-size">
            <div><span>流程名称：</span><a-input v-model:value="form.name" placeholder="请输入流程名称" /></div>
            <div><span>流程编码：</span><a-input v-model:value="form.code" placeholder="请输入流程编码" /></div>
            <div><span>创建时间：</span><a-input v-model:value="form.timestamp" placeholder="请输入流程类型" /></div>
            <!-- <div> <span>对接编码：</span><a-input v-model:value="value" placeholder="请输入对接编码" /></div>
            <div><span>设计风格：</span><a-input v-model:value="value" placeholder="请输入设计风格" /></div> -->
            <div class="header_btn">
                <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
                <a-button :icon="h(SyncOutlined)">重置</a-button>
            </div>
        </div>
    </div>
    <div class="content">
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleAdd">新增流程设计</a-button>
        <!-- 新增表单 -->
        <a-table bordered :columns="columns" :data-source="data" :pagination="{ pageSize: 10 }" :scroll="{ y: 240 }">

        </a-table>
    </div>

</template>

<script setup lang="ts">
import { h,watch,onMounted,reactive} from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Button } from 'ant-design-vue';
import { useRouter,useRoute } from 'vue-router'
import {
    SyncOutlined,
} from '@ant-design/icons-vue';
const router = useRouter();
const route=useRoute();
const data = reactive([]);
const handleAdd = () => {
    router.push('/demo/system/processdetails');
}
//表单数据
const form=reactive({
    name:'',
    code:'',
    timestamp:'',
})
//获取URL传递的数据
const newProcessData = route.query.newProcessData ? JSON.parse(route.query.newProcessData as string) : null;
 console.log(newProcessData,'66666')
 watch(()=>route.query.newProcessData,(newVal)=>{
    if(newVal){
        const parsedData=JSON.parse(newVal as string);
        console.log(parsedData)
        form.name=parsedData.name;
        form.code=parsedData.code;
        form.timestamp= parsedData.timestamp;
    }
 })
 if(newProcessData){
    data.push({
     id: data.length + 1,
        timestamp: newProcessData.timestamp,
    })
 }

//  if (newProcessData) {
//   data.push({
//     // key: data.length + 1,
//     id: data.length + 1,
//     name: newProcessData.name,
//     code: newProcessData.code,
//     age: newProcessData.age, // 这里根据实际返回的数据结构来映射
//     status: newProcessData.status,
//     timestamp: newProcessData.timestamp,
//   });
// }
// //新增表单
const columns = [
    {
        title: '#',
        dataIndex: 'id',
        width: 100,
    },
    {
        title: '流程名称',
        dataIndex: 'name',
        width: 150,
    },
    {
        title: '流程编码',
        dataIndex: 'code',
        width: 150,
    },
    {
        title: '流程类型',
        dataIndex: 'age',
        width: 150,
    },
    {
        title: '发布状态',
        dataIndex: 'status',
        width: 150,
    },
    {
        title: '创建时间',
        dataIndex: 'timestamp',
        width: 150,
    },

];

// const data = [...Array(50)].map((_, i) => ({
//     key: i,
//     name: `Edward King ${i}`,
//     id: `${i}`,
//     code: 100,
//     age: 32,
//     status: `已发布`,
//     timestamp:  new Date().toLocaleString(),

// }));


</script>

<style scoped>
.header_top {
    width: 85vw;
    height: 15vh;
    background-color: #fff;
    margin: 10px auto;
}

.components-input-demo-size {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 30px;
}

.components-input-demo-size .ant-input {
    width: 300px;
    margin: 10px;
    justify-content: space-around;
}

.header_btn {
    width: 13vw;
    height: 7vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.content {

    width: 85vw;
    height: calc(80vh - 15vh);
    background-color: #fff;
    margin: auto;
}
</style>